<template>
  <!-- // 登录组件 -->
  <div class="Login-big">
    <!-- 标题 -->
    <div>
      <h2>登录</h2>
    </div>
    <div>
      <form>
        <!-- 账号 -->
        <div>
          <label for="username">账号：</label>
          <el-input
            v-model="username"
            placeholder="请输入内容"
            id="username"
            style="width: 400px"
          ></el-input>
        </div>
        <!-- 密码 -->
        <div>
          <label for="password">密码：</label>
          <el-input
            placeholder="请输入密码"
            v-model="password"
            show-password
            id="password"
            style="width: 400px"
          ></el-input>
        </div>
      </form>
    </div>
    <div class="fotter">
      <router-link
        :to="`./home/todos?username=${username}&password=${password}`"
        class="btns"
        >登录</router-link
      >
      <router-link to="register" class="register-link">注册</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    loginCheck() {
      // 拿到存储在本地的数组
      let users = JSON.parse(localStorage.getItem("users"));
      users.forEach((user) => {
        if (user.username == this.username) {
          if (user.password == this.password) {
            // 跳转页面
            this.$router.replace("/home");
          } else {
            alert("密码错误");
            return
          }
        } else {
          alert("账号不存在，请注册");
        }
      });
    },
  },
};
</script>


<style>
.Login-big {
  width: 600px;
  height: 230px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.btns {
  background-color: #409EFF;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  color: white;
  margin-right: 20px;
  padding: 8px 16px;

  /* 鼠标悬停和按下效果 */
  transition: background-color 0.2s, border-color 0.2s; /* 添加过渡动画 */
  
  &:hover {
    background-color: #69b3ff;
    border-color: #99ccff;
    cursor: pointer;
  }

  &:active {
    background-color: #1d8ce0;
    border-color: #1d8ce0;
  }
}
.fotter {
  margin-top: 20px;
  font-size: 20px;
}
.register-link {
  display: inline-block; /* 使其呈现为块状元素 */
  background-color: #409EFF;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  color: white;
  margin-left: 20px; /* 与登录按钮保持一定间距 */
  padding: 8px 16px;

  /* 鼠标悬停和按下效果 */
  transition: background-color 0.2s, border-color 0.2s;

  &:hover {
    background-color: #69b3ff;
    border-color: #99ccff;
    cursor: pointer;
  }

  &:active {
    background-color: #1d8ce0;
    border-color: #1d8ce0;
  }
}
</style>